<template>
    <div>
        <el-drawer
            :visible="showSate"
            :size="500"
            :append-to-body="true"
            :wrapper-closable="false"
            :destroy-on-close="true"
            custom-class="notice-setting-box"
            :with-header="false"
            @open="onOpen"
            @close="onClose">
            <div class="workflow-drawer-title-container">
                <div class="title-info">
                    {{ $i18n.t('button.noticeConfig') }}
                </div>
            </div>
            <div class="workflow-drawer-middle-item-container">
                <!-- 待签核人通知-->
                <el-form ref="form" :model="localData" :rules="rules" label-position="left" class="notice-setting-form">
                    <el-form-item prop="toDoNoticeEnabled" class="title-row">
                        <span slot="label" class="item-title">{{ $i18n.t('label.toDoNotice') }}</span>
                        <el-checkbox v-model="localData.toDoNoticeEnabled">
                            <span class="item-title-operation-label">{{ $i18n.t('label.open') }}</span>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item prop="toDoNoticeTitle" label-width="70px" class="item-row">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeTitle') }}</span>
                        <el-input v-model="localData.toDoNoticeTitle"
                                  autocomplete="off"
                                  :maxlength="50"
                                  :placeholder="$i18n.t('label.noticeTitleTip')"/>
                    </el-form-item>
                    <el-form-item label-width="70px" class="last-content">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeContent') }}</span>
                        <el-button plain icon="el-icon-edit" @click="onEditContent('toDoNoticeContent')">
                            {{ $i18n.t('label.editContent') }}
                        </el-button>
                    </el-form-item>
                    
                    <!--归档通知-->
                    <el-form-item prop="fileNoticeEnabled" class="title-row">
                        <span slot="label" class="item-title">{{ $i18n.t('label.fileNotice') }}</span>
                        <el-checkbox v-model="localData.fileNoticeEnabled">
                            <span class="item-title-operation-label">{{ $i18n.t('label.open') }}</span>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item prop="fileNoticeTitle" label-width="70px" class="item-row">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeTitle') }}</span>
                        <el-input v-model="localData.fileNoticeTitle"
                                  autocomplete="off"
                                  :maxlength="50"
                                  :placeholder="$i18n.t('label.noticeTitleTip')"/>
                    </el-form-item>
                    <el-form-item label-width="70px" class="last-content">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeContent') }}</span>
                        <el-button plain icon="el-icon-edit" @click="onEditContent('fileNoticeContent')">
                            {{ $i18n.t('label.editContent') }}
                        </el-button>
                    </el-form-item>
                    
                    <!--发起人通知-->
                    <el-form-item prop="sponsorNoticeEnabled" class="title-row">
                        <span slot="label" class="item-title">{{ $i18n.t('label.sponsorNotice') }}</span>
                        <el-checkbox v-model="localData.sponsorNoticeEnabled">
                            <span class="item-title-operation-label">{{ $i18n.t('label.open') }}</span>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item prop="sponsorNoticeTitle" label-width="70px" class="item-row">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeTitle') }}</span>
                        <el-input v-model="localData.sponsorNoticeTitle"
                                  autocomplete="off"
                                  :maxlength="50"
                                  :placeholder="$i18n.t('label.noticeTitleTip')"/>
                    </el-form-item>
                    <el-form-item label-width="70px" class="last-content">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeContent') }}</span>
                        <el-button plain icon="el-icon-edit" @click="onEditContent('sponsorNoticeContent')">
                            {{ $i18n.t('label.editContent') }}
                        </el-button>
                    </el-form-item>
                    
                    <!--知会通知开关-->
                    <el-form-item prop="ccNoticeEnabled" class="title-row">
                        <span slot="label" class="item-title">{{ $i18n.t('label.ccNotice') }}</span>
                        <el-checkbox v-model="localData.ccNoticeEnabled">
                            <span class="item-title-operation-label">{{ $i18n.t('label.open') }}</span>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item prop="ccNoticeTitle" label-width="70px" class="item-row">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeTitle') }}</span>
                        <el-input v-model="localData.ccNoticeTitle"
                                  autocomplete="off"
                                  :maxlength="50"
                                  :placeholder="$i18n.t('label.noticeTitleTip')"/>
                    </el-form-item>
                    <el-form-item label-width="70px" class="last-content">
                        <span slot="label" class="content-title">{{ $i18n.t('label.noticeContent') }}</span>
                        <el-button plain icon="el-icon-edit" @click="onEditContent('ccNoticeContent')">
                            {{ $i18n.t('label.editContent') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="workflow-drawer-bottom-container">
                <el-button @click.stop="onClose" size="medium">{{ $i18n.t('button.cancel') }}</el-button>
                <el-button type="primary" @click="onSave" size="medium">{{ $i18n.t('button.sure') }}</el-button>
            </div>
        </el-drawer>
        <mail-content :state="showMailDialog"
                      :mail-data="localData[mailKey]"
                      :form-fields="formFields"
                      @on-save="onSaveContent"
                      @on-cancel="showMailDialog = false"></mail-content>
    </div>

</template>

<script lang="ts">
import {Vue, Component, Prop, Emit} from 'vue-property-decorator';
import WorkflowModel from "@/components-com/workflow/model/workflow.model";
import {ElForm} from "element-ui/types/form";
import MailContent from "@/components-com/workflow/notice-setting-drawer/mail-content.vue";
import _ from 'lodash';
import FormFieldModel from '../model/form-field.model';

/**
 * 通知设置
 */
@Component({components: {MailContent}})
export default class NoticeSettingDrawer extends Vue {
    
    /**
     * 抽屉状态
     */
    @Prop()
    public showSate: boolean;
    /**
     * 实体数据
     */
    @Prop()
    public workflowData: WorkflowModel;
    
    /**
     * 组件内数据
     */
    private localData = new WorkflowModel();
    private rules = {};
    private showMailDialog = false;
    
    private formFields: FormFieldModel[] = [{field: 'name', name: '发起人'},
        {field: 'approve', name: '审批人'},
        {field: 'approveDate', name: '审批时间'},
        {field: 'approveRes', name: '审批结果'}]
    /**
     * 修改项
     */
    private mailKey = '';
    $refs: {
        form: ElForm
    }
    
    private onOpen() {
        this.localData = _.cloneDeep(this.workflowData);
        this.$nextTick(() => {
            this.$refs.form.clearValidate();
        })
    }
    
    private mounted() {
        this.rules = {
            toDoNoticeTitle: [{validator: this.validTitle, trigger: 'blur'}],
            fileNoticeTitle: [{validator: this.validTitle, trigger: 'blur'}],
            sponsorNoticeTitle: [{validator: this.validTitle, trigger: 'blur'}],
            ccNoticeTitle: [{validator: this.validTitle, trigger: 'blur'}],
        };
    }
    
    /**
     *打开编辑
     */
    private onEditContent(key: string) {
        this.showMailDialog = true;
        this.mailKey = key;
    }
    
    @Emit()
    private onClose() {
    }
    
    /**
     * 校验标题
     */
    private validTitle = (rule: Object, value: string, callback: Function) => {
        if (_.isEmpty(value)) {
            callback(new Error(this.$i18n.t('label.noticeTitleTip') as string))
        } else {
            callback();
        }
    }
    
    /**
     * 返回保存数据
     */
    private onSave() {
        this.$refs.form.validate((state: boolean) => {
            if (state) {
                this.$emit('on-save', _.cloneDeep(this.localData));
            }
        })
    }
    
    /**
     * 邮件内容确定
     */
    private onSaveContent(data: string) {
        this.localData[this.mailKey] = data;
        this.showMailDialog = false;
    }
}
</script>
<style lang="scss" scoped>
@import "../css/workflow-csss";

.workflow-drawer-middle-item-container {
    
    .notice-setting-form {
        .item-title {
            font-weight: bold;
            font-size: 16px;
            color: $title-color;
            margin-right: 20px;
        }
        
        .item-title-operation-label {
            font-size: 16px;
        }
        
        .content-title {
            min-width: 60px;
            font-size: 14px;
            line-height: 40px;
        }
        
        .item-row {
            margin-bottom: 20px;
        }
        
        .title-row {
            margin-bottom: 12px;
        }
        
        .last-content {
            margin-bottom: 30px;
        }
    }
}
</style>
    

